<template>
  <div class="brand-story">
    <header-nav />
    
    <!-- 品牌故事头部 -->
    <div class="story-header">
      <h1>品牌故事</h1>
      <p>StoryPlush - 让每个玩偶都讲述一个故事</p>
    </div>

    <!-- 主要内容 -->
    <div class="story-content">
      <!-- 品牌介绍 -->
      <el-card class="section">
        <template #header>
          <div class="section-header">
            <h2>关于 StoryPlush</h2>
          </div>
        </template>
        <div class="section-body">
          <div class="text-content">
            <p>StoryPlush 成立于2024年，是一家专注于设计和制作高品质毛绒玩具的品牌。我们相信每个玩偶都应该有自己的故事，每个故事都能带来温暖和快乐。</p>
            <p>我们的设计师团队来自世界各地，他们将独特的创意和精湛的工艺相结合，为孩子们创造出富有想象力和教育意义的玩偶伙伴。</p>
          </div>
          <el-image 
            src="/images/brand/about.png" 
            fit="cover"
            class="section-image"
          />
        </div>
      </el-card>

      <!-- 品牌理念 -->
      <el-card class="section">
        <template #header>
          <div class="section-header">
            <h2>品牌理念</h2>
          </div>
        </template>
        <div class="values-grid">
          <div class="value-item">
            <el-icon :size="40" color="#ff6b6b"><Star /></el-icon>
            <h3>品质至上</h3>
            <p>严选优质材料，注重细节工艺，确保每个玩偶都是艺术品</p>
          </div>
          <div class="value-item">
            <el-icon :size="40" color="#ff6b6b"><Opportunity /></el-icon>
            <h3>创意设计</h3>
            <p>融入独特创意，让每个玩偶都有自己的性格和故事</p>
          </div>
          <div class="value-item">
            <el-icon :size="40" color="#ff6b6b"><Service /></el-icon>
            <h3>用心服务</h3>
            <p>提供贴心的购物体验，让每位顾客都感受到温暖</p>
          </div>
        </div>
      </el-card>

      <!-- 发展历程 -->
      <el-card class="section">
        <template #header>
          <div class="section-header">
            <h2>发展历程</h2>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in timeline"
            :key="index"
            :timestamp="item.time"
            :type="item.type"
          >
            {{ item.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 联系我们 -->
      <el-card class="section">
        <template #header>
          <div class="section-header">
            <h2>联系我们</h2>
          </div>
        </template>
        <div class="contact-info">
          <div class="info-item">
            <el-icon><Location /></el-icon>
            <span>地址：浙江省杭州市西湖区文三路 100 号</span>
          </div>
          <div class="info-item">
            <el-icon><Phone /></el-icon>
            <span>电话：400-123-4567</span>
          </div>
          <div class="info-item">
            <el-icon><Message /></el-icon>
            <span>邮箱：contact@storyplush.com</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HeaderNav from '../components/HeaderNav.vue'
import { 
  Star, 
  Opportunity,
  Service, 
  Location, 
  Phone, 
  Message 
} from '@element-plus/icons-vue'

const timeline = [
  {
    time: '2024年1月',
    content: 'StoryPlush 品牌正式成立',
    type: 'success'
  },
  {
    time: '2024年2月',
    content: '首批产品系列发布，获得市场好评',
    type: 'success'
  },
  {
    time: '2024年3月',
    content: '线上商城正式上线运营',
    type: 'success'
  },
  {
    time: '2024年4月',
    content: '推出定制化玩偶服务',
    type: ''
  },
  {
    time: '未来',
    content: '持续创新，为客户带来更多惊喜',
    type: 'primary'
  }
]
</script>

<style scoped>
.brand-story {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.story-header {
  margin: 0 auto;
  width: 95%;
  text-align: center;
  margin-top: 5rem;
  padding: 100px 20px 60px;
  /* background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); */
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/images/about-bg.jpg');
  color: white;
  border-radius: 30px 30px 30px 30px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.story-header h1 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 600;
}

.story-header p {
  font-size: 18px;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.story-content {
  max-width: 96%;
  margin: 0 auto;
  padding: 40px 20px;
}

.section {
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
}

.section-header {
  padding: 0 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.section-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.text-content {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
}

.section-image {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 20px;
}

.value-item {
  text-align: center;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s;
}

.value-item:hover {
  transform: translateY(-5px);
}

.value-item h3 {
  margin: 20px 0 10px;
  color: #333;
}

.value-item p {
  color: #666;
  line-height: 1.6;
}

.contact-info {
  padding: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #666;
}

.info-item .el-icon {
  font-size: 20px;
  color: #ff6b6b;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .story-content {
    padding: 30px 15px;
  }
}

@media (max-width: 992px) {
  .section-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .story-header {
    padding: 80px 20px 40px;
    border-radius: 0 0 20px 20px;
  }

  .story-header h1 {
    font-size: 28px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .section-image {
    height: 200px;
  }
}
</style> 